<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-10 17:14:19
-->
<template>
  <div class="map-container">
    <MiningMap @moveend="handleMoveEnd">
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
        @ready="ready"
      ></MiningTiandituLayer>
      <MiningWMSLayer
        layerName="WMS图层"
        :url="url"
        :layerId="layerId"
      ></MiningWMSLayer>
    </MiningMap>
    <div class="coordinate" v-if="center.length === 2">
      当前坐标： 经度 {{ center[0].toFixed(4) }} 纬度 {{ center[1].toFixed(4) }}
    </div>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningWMSLayer from 'mining-map/Layers/WMSLayer'
import { TiandituKey,CityCoordinates } from '@/config/config.js';

import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Style, Icon } from 'ol/style';
import marker from '@/assets/images/marker.png'

export default {
  name: 'EventDemo',
  title: '地图事件',
  parentTitle: '事件',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningWMSLayer,

  },
  data () {
    const features = [ CityCoordinates.BeiJing,  CityCoordinates.ShangHai,  CityCoordinates.XiAn].map(coords => new Feature({
      type: 'Point',
      geometry: new Point(coords),
      name: 'City',
    }));

    const style = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: marker,
      })
    })
    return {
      features,
      style,
      key: TiandituKey,
      url: 'http://124.71.237.248:8080/geoserver/city/wms',
      layerId: 'city:city',
      center: []
    }
  },
  methods: {
    ready () {},
    handleMoveEnd (evt) {
      console.log('handleMoveEnd', evt) //.center)
      this.center = evt.map.getView().getCenter()
    }
  }

}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  .coordinate {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 5px;
  }
}
</style>